<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入姓名/昵称/手机号码搜索"
            v-model="alone.searchForm.data.searchStr"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-cascader
            placeholder="请选择部门"
            v-model="alone.searchForm.data.departmentIds"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
        <el-form-item class="fr">
          <el-button type="default" @click="rNavToCreateSetting"
            >设置预警条件</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="c-main p20">
      <div class="c-section">
        <div class="c-body">
          <div class="mt20" v-for="(item, index) in pageAjax.data" :key="index">
            <el-collapse v-model="collapseCp.activeNames">
              <el-collapse-item :name="index">
                <template slot="title">
                  {{ "预警" + (index + 1) }}
                  <div class="ml20">不达标人数：{{ item.warningCount }}</div>
                </template>
                <el-card class="box-card">
                  <div>
                    <div>预警计算时长：{{ item.warningSetting.days }}天</div>
                    <div>
                      预警数据线：新建主播数{{
                        item.warningSetting.createCount
                      }}个，再遇见计算时间截止时，意向主播数{{
                        item.warningSetting.intentionCount
                      }}个，送审主播数{{
                        item.warningSetting.verifyCount
                      }}个，试播主播数{{
                        item.warningSetting.trialCount
                      }}个，已开播主播数{{
                        item.warningSetting.launchedCount
                      }}个。
                    </div>
                    <el-table
                      :key="index"
                      :data="item.warningList"
                      stripe
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="realName"
                        label="姓名"
                      ></el-table-column>
                      <el-table-column
                        prop="nickName"
                        label="昵称"
                      ></el-table-column>
                      <el-table-column label="部门">
                        <template slot-scope="scope">
                          {{ scope.row.departmentName || "无" }}
                        </template>
                      </el-table-column>
                      <el-table-column label="新建主播数">
                        <template slot-scope="scope">
                          <span
                            class="danger-text"
                            v-if="
                              scope.row.totalCount <
                                item.warningSetting.createCount
                            "
                            >{{ scope.row.totalCount }}</span
                          >
                          <span v-else>{{ scope.row.totalCount }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="意向主播数">
                        <template slot-scope="scope">
                          <span
                            class="danger-text"
                            v-if="
                              scope.row.intentionCount <
                                item.warningSetting.intentionCount
                            "
                            >{{ scope.row.intentionCount }}</span
                          >
                          <span v-else>{{ scope.row.intentionCount }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="送审主播数">
                        <template slot-scope="scope">
                          <span
                            class="danger-text"
                            v-if="
                              scope.row.toVerifyCount <
                                item.warningSetting.verifyCount
                            "
                            >{{ scope.row.toVerifyCount }}</span
                          >
                          <span v-else>{{ scope.row.toVerifyCount }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="试播主播数">
                        <template slot-scope="scope">
                          <span
                            class="danger-text"
                            v-if="
                              scope.row.trialCount <
                                item.warningSetting.trialCount
                            "
                            >{{ scope.row.trialCount }}</span
                          >
                          <span v-else>{{ scope.row.trialCount }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="已开播主播数">
                        <template slot-scope="scope">
                          <span
                            class="danger-text"
                            v-if="
                              scope.row.launchedCount <
                                item.warningSetting.launchedCount
                            "
                            >{{ scope.row.launchedCount }}</span
                          >
                          <span v-else>{{ scope.row.launchedCount }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSeestarWarningList } from "@/api/alerted.js";
import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_alertedList",
  data: () => ({
    pageAjax: {
      data: []
    },
    orgSupAjax: {
      data: []
    },

    alone: {
      searchForm: {
        data: {
          searchStr: "",
          departmentIds: []
        }
      }
    },
    collapseCp: {
      activeNames: [0]
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          multiple: true,
          emitPath: false,
          checkStrictly: true
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getOrgData();
    _that.getPageData();
  },
  methods: {
    rToCreate() {
      this.warningDrawerCp.data = {
        days: "",
        createCount: "",
        intentionCount: "",
        verifyCount: "",
        trialCount: "",
        launchedCount: ""
      };
      this.warningDrawerCp.config.visible = true;
    },
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.getPageData();
    },
    rEdit(data) {
      this.warningDrawerCp.data = data;
      this.warningDrawerCp.config.visible = true;
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.departmentIds = data.departmentIds.join(",");
      _that.pageAjax.loading = true;

      getSeestarWarningList({ params: data })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data;
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    getOrgData() {
      let _that = this;
      _that.$store.dispatch("getDepartmentList").then(() => {
        let arr = _.cloneDeep(_that.$store.state.departmentList) || [];
        _that.orgSupAjax.data = getOffspringnTree(_.cloneDeep(arr), 0);
      });
    },
    rNavToCreateSetting() {
      this.$router.push({ name: "seestar_customizeWarningList" });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .f-warningDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
}
</style>
